<script setup lang="ts">
import { useSystemStore } from '@/store/main/system/system'
import { storeToRefs } from 'pinia'
import { UTCDateFormat } from '@/utils/utcTimeFormat'
import { ref } from 'vue'
const userStore = useSystemStore()
const { userLists, userTotalCount } = storeToRefs(userStore)
// 自定义事件
const emit = defineEmits(['userNewModelShow', 'userEditModalShow'])
// 分页
const currentPage = ref(1)
const pageSize = ref(10)
fetchPageData()
//   offset: 0,
// size: 100
const handleSizeChange = () => {
  fetchPageData()
}
const handleCurrentChange = () => {
  fetchPageData()
}
// 分页发送请求
function fetchPageData(formData: any = {}) {
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const info = { size, offset }
  const queryInfo = { ...info, ...formData }
  userStore.postUsersListsAction(queryInfo)
}

// 点击删除
function deleteUserBtnClick(id: number) {
  console.log('删除id:', id)
  userStore.deleteUserByIdAction(id)
}
// 添加新用户
function addNewUserBtnClick() {
  emit('userNewModelShow')
}
// 点击编辑
function editUserBtnClick(itemData: any) {
  console.log(itemData)
  emit('userEditModalShow', itemData)
}
defineExpose({
  fetchPageData
})
</script>
<template>
  <div class="user-content">
    <div class="main-header">
      <div class="content-title">
        <h3>用户列表</h3>
      </div>
      <div class="content-btnbox">
        <el-button type="primary" @click="addNewUserBtnClick">
          新建用户
        </el-button>
      </div>
    </div>
    <div class="main-table">
      <el-table :data="userLists" border style="width: 100%">
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="realname" label="真实姓名" />
        <el-table-column prop="cellphone" label="电话号码" />
        <el-table-column prop="enable" label="状态">
          <template #default="scope">
            <!-- 作用域插槽 -->
            <el-button
              size="small"
              plain
              :type="scope.row.enable ? 'success' : 'danger'"
            >
              {{ scope.row.enable ? '启用' : '禁用' }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createAt" label="创建时间">
          <template #default="scope">
            {{ UTCDateFormat(scope.row.createAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateAt" label="更新时间">
          <template #default="scope">
            {{ UTCDateFormat(scope.row.updateAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div class="operation-box">
              <el-button
                @click="editUserBtnClick(scope.row)"
                type="primary"
                text
                size="small"
              >
                <el-icon><EditPen /></el-icon>
                编辑
              </el-button>
              <el-button
                @click="deleteUserBtnClick(scope.row.id)"
                type="primary"
                text
                size="small"
              >
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        small
        layout="total, sizes, prev, pager, next, jumper"
        :total="userTotalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style scoped lang="less">
.user-content {
  background-color: #fff;
  padding: 20px;
  margin-top: 15px;
  border-radius: 7px;
  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .main-table {
    margin-top: 15px;
    margin-bottom: 15px;
    .operation-box {
      display: flex;
      justify-content: left;
      align-items: center;
      .el-button + .el-button {
        margin-left: 0;
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: end;
    align-items: center;
  }
}
</style>
